<template>
  <el-dialog :visible.sync="isShow" title="编辑"
    width="800px"
    top="60px">
    <form-create v-model="fapi" :rule="rule" :option="option" @submit="onOkBtnClick" />
  </el-dialog>
</template>

<script>
import { treeForm, get } from '@/api/form'
import { saveOrUpdate, gets } from '@/api/formdata'
import formCreate from '@form-create/element-ui'

export default {
  props: {
    value: {
      type: Object,
      default: () => Object.create({})
    }
  },
  data() {
    return {
      isShow: true,
      fapi: null,
      rule: [{ type: 'input', title: '名称', field: 'name' },
        { type: 'InputNumber', title: '数量', field: 'stock' },
        {
          'type': 'FcRow',
          'children': [
            {
              'type': 'col',
              'props': {
                'span': 6,
                'offset': 0
              },
              'children': [
                {
                  'type': 'switch',
                  'field': 'hasMb',
                  'title': '是否使用',
                  'info': '',
                  '_fc_drag_tag': 'switch',
                  'hidden': false,
                  'display': true,
                  'value': false,
                  on: { change: (e) => {
                    this.fapi.model()['formId'].props.disabled = !e
                    this.fapi.model()['hasSku'].props.disabled = !e
                    this.listForms(0)
                  }
                  }
                }
              ],
              '_fc_drag_tag': 'col',
              'hidden': false,
              'display': true
            },
            {
              'type': 'col',
              'props': {
                'span': 15,
                'offset': 0,
                'push': 0,
                'pull': 0
              },
              'children': [
                {
                  'type': 'select',
                  'field': 'formId',
                  'title': '原料模板',
                  'info': '',
                  'effect': {
                    'fetch': ''
                  },
                  'props': {
                    'disabled': true,
                    'clearable': true,
                    'collapseTags': false
                  },
                  'options': [],
                  '_fc_drag_tag': 'select',
                  'hidden': false,
                  'display': true,
                  on: { change: (value) => {
                    this.get(value)
                    this.listForms(value)
                  }
                  }
                }
              ],
              '_fc_drag_tag': 'col',
              'hidden': false,
              'display': true
            }
          ],
          '_fc_drag_tag': 'row',
          'hidden': false,
          'display': true
        },
        {
          'type': 'FcRow',
          'children': [
            {
              'type': 'col',
              'props': {
                'span': 6,
                'offset': 0
              },
              'children': [
                {
                  'type': 'switch',
                  'field': 'hasSku',
                  'title': '是否使用',
                  'info': '',
                  'props': {
                    'disabled': true
                  },
                  '_fc_drag_tag': 'switch',
                  'hidden': false,
                  'display': true,
                  'value': false,
                  on: { change: (e) => {
                    this.fapi.model()['sku'].props.disabled = !e
                  }
                  }
                }
              ],
              '_fc_drag_tag': 'col',
              'hidden': false,
              'display': true
            },
            {
              'type': 'col',
              'props': {
                'span': 15,
                'offset': 0,
                'push': 0,
                'pull': 0
              },
              'children': [
                {
                  'type': 'select',
                  'field': 'sku',
                  'title': 'SKU模板',
                  'info': '',
                  'effect': {
                    'fetch': ''
                  },
                  'props': {
                    'disabled': true,
                    'clearable': true,
                    'collapseTags': false
                  },
                  'options': [],
                  '_fc_drag_tag': 'select',
                  'hidden': false,
                  'display': true,
                  on: { change: (value) => {
                    this.get(value)
                  }
                  }
                }
              ],
              '_fc_drag_tag': 'col',
              'hidden': false,
              'display': true
            }
          ],
          '_fc_drag_tag': 'row',
          'hidden': false,
          'display': true
        }],
      option: {}
    }
  },
  watch: {
    isShow: function() {
      this.$emit('input', null)
    }
  },
  created() {
    // this.get(this.value.confId, this.value.id || null)
  },
  methods: {
    listForms(id) {
      treeForm(id).then(res => {
        const json = []
        res.forEach(function(item) {
          json.push({ label: item.name, value: item.id })
        })
        if (id === 0) {
          this.fapi.updateRules({ 'formId': { options: json }})
        } else {
          this.fapi.updateRules({ 'sku': { options: json }})
        }
      })
    },
    onOkBtnClick(formData) {
      this.submitForm(formData)
    },
    submitForm(formData) {
      formData.id = this.value.id
      saveOrUpdate(formData).then(() => {
        this.isShow = false
        this.$parent.onSearchBtnClick()
      }).catch(() => {})
    },
    resetForm() {
      this.$refs['form'].resetFields()
    },
    async get(confId) {
      const res = await get(confId)
      this.rule = this.rule.concat(formCreate.parseJson(res.content))
      this.option = formCreate.parseJson(res.options)
      // if (id) {
      //   gets(id).then((res) => {
      //     this.fapi.setValue(res)
      //   })
      // }
    }
  }
}
</script>
